<template>
  <div class="home">
    <el-menu
      :default-active="$route.fullPath"
      style="min-height: 100vh"
      router
    >
      <el-menu-item v-for="m in menu" :key="m.name" :index="m.index">
        {{m.name}}
      </el-menu-item>
    </el-menu>
    <div class="view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Menu, MenuItem } from 'element-ui'
Vue.use(Menu).use(MenuItem)

const menu = [
  {
    name: '展开/收起',
    index: '/components/collapse'
  },
  {
    name: '数据递增',
    index: '/components/increase'
  }
]

export default {
  name: 'Home',
  data () {
    return {
      menu,
      path: this.$route
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
}

.view {
  padding: 20px;
}
</style>
